<template>
  <div class="side">
    <div class="tab-nav">
        <p v-for="(item,index) in tablist" 
        :key="item.title"
        :class="{active:curIndex === index}"
        @click="changeTab(index)"
        >
            {{ item.title }}
        </p>
    </div>
    <div class="tab-content">
        <!-- {{ title }} -->
        <h3>{{title}}</h3>
        <ul>
            <li v-for="it in tablist[curIndex].list" :key="it.name">
                <router-link :to="it.path">{{ it.name }}</router-link>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { tablist } from '../data/index'
export default {
    data() {
        return {
            title:'',
            curIndex:0,
            tablist
        }
    },
    watch:{
        $route: {
            handler() {
                this.tablist.forEach((item,index) => {
                    // 根据当前页面地址去tablist中找到对应的数据
                    const cur = item.list.find(route => route.path === this.$route.path)
                    // 判断找没找到
                    if(cur) {
                        this.title = cur.name
                        this.curIndex = index
                    }
                })
            },
            // 进入页面立即执行一次函数
            immediate:true
        }
    },
    methods:{
        changeTab(index) {
            this.curIndex = index
            // 点击tab，默认选中第一个
            this.$router.push(this.tablist[index].list[0].path)
        }
    }
}
</script>

<style lang="scss" scoped>
.side{
    width: 250px;
    background: #031133;
    display: flex;
}
.tab-nav {
    padding-top: 120px;
    width: 100px;
    p{
        color: #ccc;
        line-height: 100px;
        text-align: center;
        cursor: pointer;
    }
    .active{
    background: #0B1D45;
    } 
}
.tab-content {
    flex: 1;
    background: #0B1D45;
    h3{
        height: 120px;
        text-align: center;
        line-height: 120px;
        color: #CCC;
        border-bottom: 1px solid #fff;
    }
    ul{
        li{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        a{
            color: #fff;
            display: block;
        }
        .router-link-active{
            background: lime;
        }
    }
}

</style>